<template>
<div class="box">
    <div class="container">
        <!--头部-->
        <div class="head">
            <Header></Header>
        </div>
        <div class="main_container">
            <!--侧边导航-->
            <div class="main_side">
                <Menu></Menu>
            </div>
            <!--主体部分-->
            <div class="content_main">
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import Menu from "@/components/Menu/Menu";
import Header from "@/components/Head/Header";
export default {
    name: "index",
    components: {
        Menu,
        Header,
    },
    created() {
        const {
            dispatch
        } = this.$store;
        dispatch("PortalManagement/SET_FILEIP");
        // dispatch('PortalManagement/SET_PERMISSION_CODE');
        // 权限分配1.0
        this.Api.PermissionCode().then((res) => {
            // console.log(res, "权限的表")
            let newarr = res.data.resList;
            // console.log(newarr, "权限的表")
            let strArr = JSON.stringify(newarr);
            sessionStorage.setItem("btnAuth", strArr);
        });
    },
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .container {
        padding: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;

        .head {
            color: #000000a6;
            text-align: center;
            padding: 0;
            width: 100%;
            height: 92px;
        }

        /deep/.main_container {
            width: 100%;
            height: calc(100% - 92px);
            display: flex;

            .main_side {
                width: auto;
                background-color: #d3dce6;
                color: #333;
                text-align: center;
                line-height: 200px;
                height: 100%;
                // overflow: hidden;
            }

            .content_main {
                width: 100%;
                background-color: #f0f2f5;
                padding: 20px 20px 20px 20px;
                overflow: auto;
            }
        }
    }
}

// .el-header {
//     color: #000000a6;
//     text-align: center;
//     padding: 0;
// }

// .main_container {
//     padding-top: 92px;
//     margin-top: -92px;
// }

// /deep/.el-aside {
//     background-color: #d3dce6;
//     color: #333;
//     text-align: center;
//     line-height: 200px;
//     display: flex;
//     width: auto !important;
//     height: auto;
// }

// body>.el-container {
//     margin-bottom: 40px;
// }

// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//     line-height: 260px;
// }

// .el-container:nth-child(7) .el-aside {
//     line-height: 320px;
// }

// .box {
//     width: 100%;
//     height: 100%;
//     overflow: hidden;
// }

// /deep/.el-header {
//     height: 92px !important;
// }

// /deep/.el-main {
//     min-height: 100%;
//     background-color: #f0f2f5;
// }
</style>
